<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn1></cpn1>
		</div>

<!--使用script实现  注册组件的时候模板分离  少用-->
<script type="text/x-templete" id="cpn">
			<div>
				<h2>我是标题</h2>
				<p>我是内容：哈哈哈</p>
			</div>
		</script>


		<!--使用template实现  注册组件的时候模板分离  常用-->  
		<template id="cpn1">
			<div>
				<h2>我是标题</h2>
				<p>我是内容：templete</p>
			</div>
		</template>


		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//1.注册一个全局组件
			Vue.component('cpn', {
				/* template:`
					<div>
						<h2>这是一个标题</h2>
						<p>这是内容：柠檬</p>
					</div>
				` */
				template: `#cpn`
			})
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello',

				},
				//局部注册组件
				components:{
					'cpn1':{
						template:'#cpn1'
					}
				
				}
			});
		</script>
	</body>
</html>
